<template>
  <TnNavbar height="428rpx" bg-color="#0d57d6" text-color="#fff">
    <view style="display: flex;justify-content: center;align-items: center;flex-direction: column;margin-top: 130rpx;">
    </view>
    <template #back>
      <view style="width: 100%;padding: 20rpx">
        <view class="vip-box">
          <image src="/static/vip.png"/>
        </view>
      </view>
      <view style="position: fixed;top: -70rpx;" @click="backClick">
        <TnIcon name="left" size="40" color="#fff"/>
      </view>
    </template>
  </TnNavbar>
  <view class="app">
    <!--uniapp左右滚动的轮播图-->
    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
      <template v-for="(item,index) in vipData" :key="index">
        <view class="scroll-view-item_H bg-color" @click="selectItem(index,item)"
              :class="{ 'selected': selectedItem === index }" style="position: relative;">
          <view class="vip-item">
            <view style="font-size: 56rpx;">{{ item.title }}</view>
            <view style="font-size: 40rpx">{{ item.dis_price }}</view>
            <view style="font-size: 28rpx;text-decoration: line-through;">{{ item.price }}</view>
            <view v-if="selectedItem === index" class="button-container">
              <view>{{ discounts }}</view>
            </view>
          </view>
        </view>
      </template>
    </scroll-view>

    <view style="width: 100%;display: flex;justify-content: flex-start;align-items: center;padding: 25rpx">
      <TnTitle title="会员收益" size="xl" color="#0052D9"/>
    </view>
    <view style="width: 100%;display: flex;padding: 25rpx;flex-direction: column">
      <view style="border-bottom: rgba(231, 231, 231, 1) 1rpx solid;padding: 16rpx 0 16rpx 0;font-size: 28rpx">
        可以下载海量学习资料
      </view>
      <view style="border-bottom: rgba(231, 231, 231, 1) 1rpx solid;padding: 16rpx 0 16rpx 0;">
        <view style="font-size: 28rpx">VIP真人客服服务</view>
        <view style="color: rgba(0, 0, 0, 0.6);font-size: 20rpx">全天 08点到 24点真人客服</view>
      </view>
      <view style="border-bottom: rgba(231, 231, 231, 1) 1rpx solid;padding: 16rpx 0 16rpx 0;font-size: 28rpx">
        随时请家教
      </view>
      <view style="border-bottom: rgba(231, 231, 231, 1) 1rpx solid;padding: 16rpx 0 16rpx 0;">
        <view style="font-size: 28rpx">可换教师</view>
        <view style="color: rgba(0, 0, 0, 0.6);font-size: 20rpx">如果需要每个阶段可以换教师</view>
      </view>
    </view>
    <view style="width: 100%;display: flex;justify-content: flex-start;align-items: center;padding: 25rpx">
      <TnTitle title="会员规则" size="xl"/>
    </view>
    <view style="width: 100%;display: flex;padding: 25rpx;flex-direction: column">
      <view style="border-bottom: rgba(231, 231, 231, 1) 1rpx solid;padding: 16rpx 0 16rpx 0;font-size: 28rpx">
        会员服务为虚拟商品，支付成功后不支持退款
      </view>
    </view>
    <TnButton width="686" height="96" shape="round" bg-color="#0052D9" text-color="#fff" @click="openVipClick">
      开通会员
    </TnButton>
  </view>
</template>

<script setup>
import {ref} from "vue";
import {onShow} from "@dcloudio/uni-app";
import {get, post} from "@/request/request";
import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'


const vipData = ref({})
const selectedItem = ref(null); // 用于跟踪选中的项目的索引
const discounts = ref('');
const selectedItemId = ref(null); // 新增一个变量用于保存选中项目的ID

onShow(() => {
  getVipDAta();
})

const getVipDAta = () => {
  get('/public_api/vip_list').then(res => {
    const {data} = res;
    console.log('/public_api/vip_list', data);
    vipData.value = data;
  })
}

const selectItem = (index, item) => {
  selectedItem.value = index;
  selectedItemId.value = item.id;
  const discountLevel = item.dis_price / item.price;
  const discount = discountLevel.toFixed(2) + '折'
  discounts.value = discount;
};


const openVipClick = () => {
  post('/buy_vip', {vip_id: selectedItemId.value}, {
    "Content-Type": "application/x-www-form-urlencoded",
    "sessionKey": uni.getStorageSync("sessionKey")
  }).then(res => {
    const {data} = res;
    console.log('/pay', data)
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: data.package,
      signType: data.signType,
      paySign: data.paySign,
      success: function (res) {
        // console.log('success:支付成功' + JSON.stringify(res));
        selectedItem.value = null;
        selectedItemId.value = null;
        uni.showToast({
          title: '充值成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 500)
      },
      fail: function (err) {
        console.log('fail:支付失败' + JSON.stringify(err));
      }
    });
  })
}
const backClick = () => {
  uni.navigateBack()
}
</script>


<style scoped lang="scss">
.vip-box {
  width: 686rpx;
  height: 384rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24rpx;
  background: linear-gradient(97.24deg, #464763 6.38%, #1F1D34 94.89%);

  image {
    width: 220rpx;
    height: 90rpx;
  }
}

.app {
  margin-top: 180rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 50rpx;

  .scroll-view_H {
    padding: 20rpx;
    white-space: nowrap;
    width: 100%;

    .scroll-view-item_H {
      display: inline-block;
      width: 165px; /* 修改宽度为165px */
      height: 220px; /* 修改高度为220px */
      text-align: center;
      font-size: 24px; /* 调整字体大小 */
      margin-right: 30px;
      border-radius: 18rpx;

      .vip-item {
        width: 165px; /* 修改宽度为165px */
        height: 220px; /* 修改高度为220px */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #FFFFFF;

        .button-container {
          position: absolute;
          top: 0;
          left: 0;
          width: 92rpx;
          height: 40rpx;
          background: rgba(237, 201, 146, 1);
          border-radius: 20rpx;
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }

    .selected {
      border: 2rpx solid rgba(237, 201, 146, 1); /* 设置选中状态下的边框颜色 */
    }
  }

  .vip-btn {
    bottom: 50rpx;
    width: 686rpx;
    height: 96rpx;
    background: #0052D9;
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    font-size: 32rpx;
  }
}
</style>
